<template lang="pug">
view.menber_page
	view.header
		image.bg(:src="`${prefix_image}/memberRedemption/header.png`")
		view.integral
			view.left
				image.notify(:src="`${prefix_image}/memberRedemption/notify.png`")
				text(v-if="isLogin") 本月有
					text.colorRed xxx
					| 积分即将到期
				text(v-else) 登录后可查看积分动态
			image.back(:src="`${prefix_image}/memberRedemption/back.png`")
	view.header_bottom
		view.left(@tap="goToIntegralRecord()")
			image.dogintegral( v-if="isLogin" :src="`${prefix_image}/memberRedemption/dogintegral.png`")
			text(v-if="isLogin") 164542
			text(v-else) 请登录
			image.sanjiao(:src="`${prefix_image}/memberRedemption/sanjiao.png`")
		view.right 获取积分
	view.goosList
		text.exchange 商品兑换
		scroll-view.list(scroll-y="true")
			view.content
				view.left
					view.listItem(v-for="item in leftList" :key="item.id" @tap="pupopEvents(true, item)")
						image(src="https://seopic.699pic.com/photo/50135/8179.jpg_wh1200.jpg")
						text.title {{ item.name }}
						text.stock 剩余{{ item.stock }}件
						view.btn
							image(:src="`${prefix_image}/memberRedemption/smalldogintegral.png`")
							text.price {{ item.integral }}
								text + {{ item.price }}
				view.right
					view.listItem(v-for="item in rightList" :key="item.id" @tap="pupopEvents(true, item)")
						image(src="https://seopic.699pic.com/photo/50135/8179.jpg_wh1200.jpg")
						text.title {{ item.name }}
						text.stock 剩余{{ item.stock }}件
						view.btn
							image(:src="`${prefix_image}/memberRedemption/smalldogintegral.png`")
							text.price {{ item.integral }}
								text(v-if="item.price")
									| + ¥{{ item.price }}
			view.isEnd
				image(:src="`${prefix_image}/memberRedemption/loadend.png`")
				text 别拽啦~这是我的底线汪~
	guiPopup(ref="guipopup1" :showStatus="popupShow" :canCloseByShade="false")
		view.gui-relative.propBox
			view.top
				image(mode="aspectFit" src="https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/16.png")
			view.bom
				text.title()
					| {{ popupInfo.name }}
				view.price 
					image(:src="`${prefix_image}/memberRedemption/smalldogintegral.png`")
					text.price {{ popupInfo.integral }} 
						text(v-if="popupInfo.price") + ¥{{ popupInfo.price }}
				view.btn 确认兑换
			view.close 
				text.demo-close.gui-icons.gui-color-white(@tap.stop="pupopEvents(false)")
					| &#xe78a;
</template>
<script>
import store from '@/store';
import guiPopup from "@/GraceUI5/components/gui-popup.vue";
import { defineComponent, ref, watch, getCurrentInstance, reactive, onMounted, toRefs, nextTick, computed } from 'vue'
import user from '@/hooks/useUser.js'
import config from '@/hooks/useConfig.js'
export default defineComponent({
	components: {
		guiPopup
	},
	setup() {
		const data = reactive({
			leftList: [],
			rightList: [],
			popupShow: false,
			popupInfo: {},
		})
		const { isLogin }=user()
		const { prefix_image }=config()
		const goodsList = ref([])
		watch([goodsList], ([newValues]) => {
			newValues.forEach((item, index) => {
				index % 2 === 0 ? data.leftList.push(item) : data.rightList.push(item)
			})
		})
		const pupopEvents = (bool, item) => {
			if (item) {data.popupInfo = item}
			data.popupShow = bool
		}
		
		const goToIntegralRecord = () => {
			uni.navigateTo({
				url: '/pages/IntegralRecord/index'
			});

		}
		onMounted(() => {
			setTimeout(() => {
				goodsList.value = [...goodsList.value, ...[{
					id: 1,
					name: '阿斯加德花生壳按时发达发顺丰京东发货卡萨丁奥斯卡大姐夫',
					stock: 1,
					price: 100,
					integral: 100
				},
				{
					id: 2,
					name: '左下方不占地方个',
					stock: 2,
					price: 200,
					integral: 200
				}, {
					id: 3,
					name: '阿斯蒂芬',
					stock: 3,
					price: 300,
					integral: 300
				}, {
					id: 4,
					name: '我人生巅峰暗室逢灯',
					stock: 4,
					price: 400,
					integral: 400
				}, {
					id: 5,
					name: '阿斯蒂芬暗室逢灯',
					stock: 5,
					price: 500,
					integral: 500
				}, {
					id: 6,
					name: '阿斯蒂芬阿斯蒂芬',
					stock: 6,
					price: 600,
					integral: 600
				}, {
					id: 7,
					name: '阿斯顿',
					stock: 7,
					price: 700,
					integral: 700
				}, {
					id: 8,
					name: '阿斯蒂芬',
					stock: 8,
					price: 800,
					integral: 800
				}, {
					id: 9,
					name: '阿斯蒂芬个',
					stock: 9,
					price: 900,
					integral: 900
				}, {
					id: 10,
					name: '阿斯蒂芬安慰费',
					stock: 10,
					price: 1000,
					integral: 1000
				}, {
					id: 11,
					name: '阿斯蒂芬碍事',
					stock: 11,
					price: 1100,
					integral: 1100
				}, {
					id: 12,
					name: '阿斯顿发是阿斯顿发',
					stock: 12,
					price: 1200,
					integral: 1200
				}]]
			}, 0)
		}
		)
		return {
			...toRefs(data),
			pupopEvents,
			isLogin,
			prefix_image,
			goToIntegralRecord
		}
	},
})
</script>
<style lang="stylus" scoped>
.menber_page{
	min-height: 100vh
	width 100vw
	background: #F6F6F7;
	.header{
		width 100vw
		height: 520rpx
		position: relative
		box-sizing: border-box
		image.bg{
			width 100%
			height: 100%
		}
		.integral{
			position: absolute
			bottom 0
			left: 0
			margin 0 32rpx
			width calc(100vw - 124rpx)
			height: 90rpx
			background: #FFE47B
			padding 0 28rpx 0 32rpx
			display: flex
			justify-content: space-between
			align-items: center
			border-radius: 16rpx 16rpx 0 0;
			.left{
				display: flex
				align-items: center
				.notify{
					width 32rpx
					height: 32rpx
					margin-right: 8rpx
				}

				>text{
					font-size 26rpx
					font-weight: 400;
					color: #111111;
					.colorRed{
						color: #FF413C
					}
				}
			}
			.back{
				width 44rpx
				height: 44rpx
			}
		}
	}
	.header_bottom{
		width: calc( 100vw - 128rpx)
		height: 150rpx;
		background: #FFFFFF;
		border-radius: 0 0 16rpx 16rpx;
		margin: 0 32rpx
		display: flex
		justify-content: space-between
		align-items: center
		padding 0 32rpx
		margin-bottom 64rpx
		.left{
			display: flex
			justify-content: space-between
			align-items: center

			image.dogintegral{
				width: 54rpx
				height: 54rpx
			}
			image.sanjiao{
				width 28rpx
				height: 28rpx
			}
			text{
				font-size: 64rpx;
				font-weight: bold;
				color: #111111;
				margin 0 16rpx 0 12rpx
			}
		}
		.right{
			border-radius: 32px;
			border: 1rpx solid #CCCCCC;
			line-height 60rpx
			padding 0 16rpx
			font-size: 28rpx;
			font-weight: 400;
			color: #666666;
		}
	}
}
</style>
<style lang="stylus" scoped>
.goosList{
	padding: 0 32rpx
	.exchange{
		font-size: 32rpx;
		font-weight: 600;
		color: #111111;
		line-height: 45rpx;
	}
	>.list{
		margin-top 24rpx
		height: calc(50vh - 60rpx)
		width 100%
		.content{
			display: flex;
			justify-content: space-between
			.left,.right{
				width 330rpx
				.listItem{
					margin-bottom: 26rpx
					background: #fff
					overflow: hidden
					>image{
						width: 330rpx
						height: 330rpx
					}
					.title{
						font-size: 28rpx;
						font-weight: 600;
						color: #333333;
						line-height: 40rpx;
						margin 24rpx 18rpx 14rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						display:-webkit-box; //作为弹性伸缩盒子模型显示。
						-webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
						-webkit-line-clamp:2; //显示的行
					}
					.stock{
						margin 0 18rpx
						font-size: 24rpx;
						font-weight: 400;
						color: #B2B2B2;
						line-height: 1;
					}
					.btn{
						width: 260rpx;
						height: 64rpx;
						background: #FFD300;
						border-radius: 32rpx;
						border: 1rpx solid rgba(0, 0, 0, 0.05);
						margin 25rpx 32rpx 35rpx
						display: flex
						align-items: center
						justify-content: center
						font-size: 26rpx;
						font-weight: 600;
						color: #FFFFFF;
						line-height: 38rpx;
						image{
							width 60rpx
							height: 60rpx
							margin-left -20rpx
						}
						.price{
							margin-left -10rpx
						}
					}
				}
			}
		}
	}
}
</style>
<style lang="stylus" scoped>
.isEnd{
	display: flex
	flex-direction: column
	align-items: center
	justify-content: center
	margin: 80rpx 0
	font-size: 24rpx;
	font-weight: 400;
	color: #999999;
	line-height: 33rpx;
	image{
		width 72rpx
		height: 72rpx
		margin-bottom 16rpx
	}
}
</style>
<style scoped lang="stylus">
.propBox{
	width: 560rpx;
	height: 980rpx;
	position relative
	display: flex
	flex-direction: column
	.top{
		display: flex;
		align-items: center;
		justify-content: center;
		width 560rpx
		height: 560rpx
		background: #fff;
		border-radius: 8rpx 8rpx 0 0;

	}
	.bom{
		width: 560rpx
		height: 314rpx
		padding 20rpx 32rpx
		text-align: center
		box-sizing: border-box
		background: #fff;
		border-radius:  0 0 8rpx 8rpx;
		margin-top -2rpx
		.title{
			overflow: hidden;
			text-overflow: ellipsis;
			display:-webkit-box; //作为弹性伸缩盒子模型显示。
			-webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
			-webkit-line-clamp:1; //显示的行
			font-size: 32rpx;
			font-weight: 400;
			color: #333333;
			line-height: 45rpx;
		}
		.price{
			display flex
			align-items: center
			justify-content: center
			font-size: 49rpx;
			font-weight: 600;
			color: #333333;
			line-height: 70rpx;
			image{
				width:76rpx
				height: 76rpx
			}
		}
		.btn{
			width: 320rpx;
			height: 96rpx;
			background: #FFD300;
			border-radius: 48rpx; 
			line-height 96rpx
			font-size: 30rpx;
			font-weight: 600;
			color: #111111;
			margin 36rpx auto 0
		}

	}
	.close{
		height 64rpx
		width 100%
		position: absolute
		bottom 15rpx
		text-align:center
		padding-top 18rpx
		box-sizing: border-box
		text{
			font-size 64rpx
			opacity .5
		}
	}

}
</style>